
<template>
<div>
    <v-card v-show="goTopShow">
        <v-card-text style="position:fixed;bottom:60px;z-index:5">
            <v-btn absolute dark fab top right color="green" @click="goTop">
              <v-icon>keyboard_arrow_up</v-icon>
            </v-btn>
        </v-card-text>
    </v-card>
</div>
</template>

<script>
    var pos1=document.body.scrollTop
    var pos2 = document.body.scrollTop
    export default {
        name: "goTop",
        data(){
          return{
            goTopShow:false,
          }

        },
        methods:{
            handleScroll () {
                var pos2 = document.body.scrollTop
                if(pos2==0){
                    this.goTopShow=false;
                }else if(pos2<pos1){
                    this.goTopShow=true
                }else{
                    this.goTopShow=false
                }
                pos1=pos2
            },
            goTop(){
                document.body.scrollTop=0
                this.goTopShow=false
                pos1=pos2
            }
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll)
        },
        destroyed(){
            window.removeEventListener('scroll', this.handleScroll)
        }

    }
</script>